<template>
  <div id="app">
    <router-view/>
    <tabbar :backgroundcolor = 'backgroundcolor' :color="color" :tabbarList = 'tabbarList'>
    </tabbar>
  </div>
</template>

<script>
import tabbar from './components/tabbar/tabbar.vue'
// import tabbarItem from './components/tabbar/tabbarItem.vue'
export default {
  name: 'App',
  data () {
    return {
      backgroundcolor: '#f2f2f2',
      color: 'red',
      tabbarList: [
        {
          routePath: '/home',
          imgUrl: require('./assets/img/tabbar/home.svg'),
          imgUrlActive: require('./assets/img/tabbar/home_active.svg'),
          text: '首页'
        },
        {
          routePath: '/category',
          imgUrl: require('./assets/img/tabbar/category.svg'),
          imgUrlActive: require('./assets/img/tabbar/category_active.svg'),
          text: '分类'
        },
        {
          routePath: '/cart',
          imgUrl: require('./assets/img/tabbar/shopcart.svg'),
          imgUrlActive: require('./assets/img/tabbar/shopcart_active.svg'),
          text: '购物车'
        },
        {
          routePath: '/profile',
          imgUrl: require('./assets/img/tabbar/profile.svg'),
          imgUrlActive: require('./assets/img/tabbar/profile_active.svg'),
          text: '我的'
        }
      ]
    }
  },
  components: {
    tabbar
    // tabbarItem
  }
}
</script>

<style>
@import './assets/css/base.css';
</style>
